<template>
  <div class="header-box" v-if="showBar">
    <div class="title">{{barTitle}}<img src="../assets/img/back.png" class="back" @click="backPage"/></div>
  </div>
</template>

<script>
  export default {
    props:{
      barTitle:String,
      default:""
    },
    data(){
      return{
        showBar:""
      }
    },
    created(){
      let _this = this;
      let u = navigator.userAgent;
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isiOS) {
        _this.showBar = false;
      } else {
        _this.showBar = true;
      }
    },
    methods:{
      backPage(){
        this.$emit("backPage");
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .header-box
    display: flex
    align-items: center
    justify-content: center
    width: 100%
    height: 1.373rem
    border-bottom: 1px solid rgba(230, 230, 230, 1)
    .title
      font-size: 0.533rem
      color: rgba(27, 27, 27, 1)
      .back
        position: absolute
        left: 0.573rem
        width: 0.267rem
        height: 0.493rem
</style>
